<template>
	<div class="layout-main">			
			<div class="">
				<el-form :model="tableData" status-icon :rules="rules1" ref="tableData" label-width="100px" class="demo-ruleForm">
					<div v-if="step == 1" class="share-item">
						<div class="item-con">
							<div class="item-title">微信开发平台设置</div>
							<el-form-item label="APP ID" prop="appid">
								<el-input v-model="tableData.appid"></el-input>
							</el-form-item>
							<el-form-item label="appsecrect" prop="appsecrect">
								<el-input v-model="tableData.appsecrect"></el-input>
							</el-form-item>
						</div>
						<div class="item-con">
							<div class="item-title">微信开发平台接入设置</div>
							<el-form-item label="消息校验token" prop="apptoken">
								<el-input v-model="tableData.apptoken"></el-input>
							</el-form-item>
							<el-form-item label="消息加解密key" prop="appkey">
								<el-input v-model="tableData.appkey"></el-input>
							</el-form-item>
						</div>					
					</div>
					<div v-if="step == 2" class="section section-table">
						<div class="section section-filter">
							<div class="panel-title">
								<span class="title">基础配置</span>
							</div>
						</div>						
						<el-form-item label="头像" prop="appavatar">
							<el-input v-model="tableData.appavatar"></el-input>
						</el-form-item>
						<el-form-item label="名称" prop="appname">
							<el-input v-model="tableData.appname"></el-input>
						</el-form-item>
						<el-form-item label="返回广告链接" prop="backurl">
							<el-input v-model="tableData.backurl"></el-input>
						</el-form-item>
						<el-form-item label="悬浮广告链接" prop="bottombanner.link">
							<el-input v-model="tableData.bottombanner.link"></el-input>
						</el-form-item>
						<el-form-item label="悬浮广告图片" prop="bottombanner.img">
							<el-input v-model="tableData.bottombanner.img"></el-input>
						</el-form-item>
						<el-form-item label="随机名称" prop="namelist">
							<el-input type="textarea" v-model="tableData.namelist"></el-input>
						</el-form-item>
						<el-form-item label="统计代码" prop="statisticalcode">
							<el-input type="textarea" v-model="tableData.statisticalcode"></el-input>
						</el-form-item>		
					</div>	
					<div v-if="step == 3" class="share-item">
						<div class="item-con">
							<div class="item-title">人物配置</div>
							<el-upload
								class="avatar-uploader"
								action="https://jsonplaceholder.typicode.com/posts/"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="tableData.imageUrl" :src="tableData.imageUrl" class="avatar">
								<i v-else class="avatar-uploader-icon iconfont">&#xe649;</i>
							</el-upload>
							<el-form-item label="appsecrect" prop="title ">
								<el-input v-model="tableData.title"></el-input>
							</el-form-item>
						</div>
						<div class="item-con">
							<div class="item-title">聊天配置</div>
							<el-form-item label="文字" prop="title ">
								<el-input type="textarea" placeholder='一行一句，按顺序发送' v-model="tableData.title"></el-input>
							</el-form-item>
							<el-form-item label="图片" prop="">
								<el-upload
								class="avatar-uploader big-uploader"
								action="https://jsonplaceholder.typicode.com/posts/"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="tableData.imageUrl" :src="tableData.imageUrl" class="avatar">
								<i v-else class="avatar-uploader-icon iconfont">&#xe649;</i>
							</el-upload>
							</el-form-item>
						</div>					
					</div>		
					<div v-if="step == 4">
						<div v-if="tabIndex == 0">
							<div class="item-con">
								<div class="item-title">分享一</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.group[0].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.group[0].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.group[0].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.group[0].img"></el-input>
								</el-form-item>	
							</div>	
							<div class="item-con">
								<div class="item-title">分享二</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.group[1].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.group[1].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.group[1].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.group[1].img"></el-input>
								</el-form-item>	
							</div>
							<div class="item-con">
								<div class="item-title">分享三</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.group[2].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.group[2].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.group[2].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.group[2].img"></el-input>
								</el-form-item>	
							</div>
							<div class="item-con">
								<div class="item-title">分享四</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.group[3].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.group[3].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.group[3].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.group[3].img"></el-input>
								</el-form-item>	
							</div>
						</div>
						<div v-if="tabIndex == 1">
							<div class="item-con">
								<div class="item-title">分享一</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.timeline[0].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.timeline[0].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.timeline[0].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.timeline[0].img"></el-input>
								</el-form-item>	
							</div>	
							<div class="item-con">
								<div class="item-title">分享二</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.timeline[1].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.timeline[1].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.timeline[1].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.timeline[1].img"></el-input>
								</el-form-item>	
							</div>
							<div class="item-con">
								<div class="item-title">分享三</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.timeline[2].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.timeline[2].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.timeline[2].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.timeline[2].img"></el-input>
								</el-form-item>	
							</div>
							<div class="item-con">
								<div class="item-title">分享四</div>
								<el-form-item label="标题" prop="title">
									<el-input v-model="tableData.timeline[3].title"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
									<el-input v-model="tableData.timeline[3].desc"></el-input>
								</el-form-item>
								<el-form-item label="链接" prop="link">
									<el-input v-model="tableData.timeline[3].link"></el-input>
								</el-form-item>
								<el-form-item label="缩略图" prop="img">
									<el-input v-model="tableData.group[3].img"></el-input>
								</el-form-item>	
							</div>
						</div>
					</div>
					<div v-if="step == 5">
						<el-input type="textarea" v-model="tableData.luodi"></el-input>
					</div>
					<el-button v-if="step != stepCount" @click="next">下一步</el-button>
					<el-button v-if="step == stepCount" @click="submit">保存</el-button>
				</el-form>
			</div>	
		</div>
	</div>
</template>
<script>	
	import '@/assets/less/modules/upload.less';
	import '@/assets/less/modules/switch.less';
	export default {
		data() {
			return {	
				step: '',
				tabIndex: 0,
				stepCount: 1,
				id: '',	
				apptype: '',				
				rules1: {},
				tableData :{
					imageUrl: '',
					bottombanner:{},
					topbanner:{},
					"group": [{}, {}, {}, {}],
					"timeline": [{}, {}, {}, {}],
					apptype: this.$route.query.apptype
				}
			}
		},
		mounted() {			
			this.id = this.$route.query.id
			this.apptype = this.$route.query.apptype ? parseInt(this.apptype) : ''
			if(this.id) {
				this.step = 2
				this.stepCount = 5
				this.$store.commit('breadData', {
					pageName:'群聊项目管理',				
					list:[
						{
							name: '项目列表'
						},{
							name: '编辑'
						}
					]
				})

				api.get({ "apptype": this.apptype, "appid": this.id}).then(data => {
	    			this.tableData = data
	    		})
			} else {
				this.step = 1
				this.stepCount = 5
				this.$store.commit('breadData', {
				pageName:'微信开发平台设置',				
				list:[
					{
						name: '开放平台设置'
					}
				]
			})
			}
		},		
		methods: {
			next() {	
				if(this.step == 2) {
					if(this.apptype == 0) {
						this.step = this.step + 1
					} else {
						this.step = this.step + 2
					}
				} else {
					this.step = this.step + 1
				}

				if(this.step == 2) {
					this.$store.commit('breadData', {
						pageName:'群聊项目管理',				
						list:[
							{
								name: '项目列表'
							},{
								name: '编辑'
							}
						]
					})
				} else if (this.step == 3){
					this.$store.commit('breadData', {
						pageName:'项目管理',				
						list:[
							{
								name: '模拟聊天'
							}
						]
					})
				} else if (this.step == 4) {
					this.$store.commit('breadData', {
						pageName:'分享设置',				
						list:[],
						tabs:[
							{
								label: '群聊',
								name: 'group',
								tab: '0',
							},{
								label: '朋友圈',
								name: 'timeline',
								tab: '1',
							}
						]
					})
				}else if (this.step == 5) {
					this.$store.commit('breadData', {
						pageName:'落地域名',				
						list:[
							{
								name: '域名列表'
							}
						]
					})
				}
			},	
			beforeAvatarUpload () {

			},	
			handleAvatarSuccess () {

			},
			submit () {
				if(this.id) {
					api.set(this.tableData).then(data => {
		    			console.log(data)
		    		})
				} else {
					api.add(this.tableData).then(data => {
		    			console.log(data)
		    		})
	    		}
			}			
		}
	}
</script>